<template>
	<view class="page">
		<view class="search-bar">
			<view class="search-box">
				<image
					src="https://wx.2024csnl.com/static/home/home-search.png"
					mode="aspectFill"
					class="icon" />
				<input
					type="text"
					class="input"
					placeholder="搜索商品"
					confirm-type="search"
					placeholder-class="p-c"
					v-model="keyword"
					@confirm="search"
					@blur="search">
				<text
					class="btn"
					@click="search">搜索</text>
			</view>
		</view>
		
		<view class="classify" >
			<view
				:class="{
					'item': true,
					'is-active': classify == 0
				}"
				@click="changeClassify(0)">
				<view class="cell">
					<text>逆伶产品</text>
				</view>
			</view>
			<view
				:class="{
					'item': true,
					'is-active': classify == 1
				}"
				@click="changeClassify(1)">
				<view class="cell">
					<text>甄选套餐</text>
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="content-tabs">
				<view
					v-for="(item, index) in tabs"
					:key="index"
					:class="{
						'item': true,
						'is-active': index == tabsIndex
					}">
					<view
						class="cell"
						@click="changeTabs(index)">
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>
			<view class="content-list">
				<scroll-view
					scroll-y="true"
					class="scroll">
					<view
						class="ad"
						style="border-radius: 20rpx; overflow: hidden;">
						<swiper
							:indicator-dots="false"
							autoplay
							circular
							:interval="3000"
							:duration="1000">
							<swiper-item
								v-for="(item5, index5) in bannerList"
								:key="index5">
								<image
									:src="item5.img"
									mode="widthFix">
								</image>
							</swiper-item>
						</swiper>
					</view>
					<view
						v-if="tabs.length"
						class="classname">
						<text>{{ tabs[tabsIndex].classify }}</text>
					</view>
					<view
						v-if="tabs && tabs.length"
						class="list">
						<view
							v-for="(item2, index2) in tabs[tabsIndex].goods"
							:key="index2"
							class="item is-x1">
							<view
								class="cell"
								@click="onSkip(`/pages/goods/goods-detail?id=${item2.id}`)">
								<view class="cover">
									<image :src="item2.pic" mode=""></image>
								</view>
								<view class="exp">
									<view class="name">
										<text>{{ item2.name }}</text>
									</view>
									<view class="fee">
										<text>￥</text>
										<text>{{ item2.sell_price }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!-- <tabbar :current="1" :bid="1"></tabbar> -->
	</view>
</template>

<script>
	import { $get, $post, getHotMerchantDetails } from "@/api/index.js"
	import tabbar from '@/components/tabbar.vue';
	
	export default {
		components: {
			tabbar,
		},
		data() {
			return {
				tabs: [],
				tabsIndex: 0,
				tableData: [],
				classify: 0,
				keyword: '',
				bannerList: []
			}
		},
		onLoad () {
			this.getBanner()
			this.getTableData()
		},
		methods: {
			async getTableData () {
				const params = {}
				if (this.keyword) params.keyword = this.keyword;
				const res = await $get('s=/ApiIndex/maingoodslist', {
					bid: 1,
					...params
				})
				const { msg, data, status } = res.data
				if (status == 1) {
					data.map(item => {
						item.name = ''
						if (item.classify) {
							item.name = item.classify.replace(/系列/g, '')
						}
					})
					this.tabs = data
				}
			},
			search () {
				this.getTableData()
			},
			// banner
			async getBanner () {
				const res = await $get(`s=/ApiIndex/businessxq&id=1`)
				const { msg, data, status, banner } = res.data
				if (status == 1) {
					this.bannerList = banner
				}
			},
			// 切换2
			changeClassify (k) {
				this.classify = k
				const index = this.tabs.findIndex(item => item.name === '甄选套餐')
				if (~index) this.tabsIndex = index;
			},
			// 切换
			changeTabs (index) {
				this.tabsIndex = index
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		height: calc(100vh - 100rpx);
		background: #f8f8f8;
		display: flex;
		flex-direction: column;
	}
	
	.search-bar {
		padding: 20rpx;
		background: #ffffff;
		.search-box {
			background: #f8f8f8;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			.icon {
				display: block;
				width: 40rpx;
				height: 40rpx;
				margin: 0 20rpx;
			}
			.input {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
			}
			.btn {
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 40rpx;
				opacity: 0;
			}
		}
	}
	
	.classify {
		position: relative;
		background: #ffffff;
		display: flex;
		align-items: center;
		.item {
			flex: 1;
			text-align: center;
			&.is-active {
				.cell {
					text {
						font-weight: bold;
						color: #41644A;
					}
					&:before {
						visibility: visible;
					}
				}
			}
		}
		.cell {
			position: relative;
			text {
				position: relative;
				display: block;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 30rpx;
				z-index: 2;
				color: #999;
			}
			&:before {
				visibility: hidden;
				content: '';
				position: absolute;
				left: 50%;
				margin-left: -80rpx;
				top: 55rpx;
				background: linear-gradient(270deg, rgba(253, 214, 159, 0) 0%, #FDD69F 100%);
				border-radius: 10rpx;
				width: 180rpx;
				height: 20rpx;
			}
		}
	}
	
	.content {
		flex: 1;
		overflow: hidden;
		display: flex;
		.content-tabs {
			width: 180rpx;
			background: #fcfcfc;
			text-align: center;
			.item {
				&.is-active .cell {
					background: #f8f8f8;
					&:before {
						visibility: visible;
					}
					text {
						font-weight: bold;
						color: #41644A;
					}
				}
			}
			.cell {
				position: relative;
				&:before {
					visibility: hidden;
					content: '';
					position: absolute;
					z-index: 2;
					left: 0;
					top: 20rpx;
					bottom: 20rpx;
					width: 8rpx;
					background: #41644A;
				}
				text {
					line-height: 40rpx;
					padding: 30rpx 20rpx;
					font-size: 28rpx;
					display: block;
					color: #253A2A;
				}
			}
		}
		.content-list {
			flex: 1;
			.scroll {
				position: relative;
				height: 100%;
				overflow: hidden;
			}
			.ad {
				margin: 20rpx;
				image {
					display: block;
					width: 100%;
					height: 30vw;
					background: #eeeeee;
				}
			}
			.classname {
				height: 60rpx;
				line-height: 60rpx;
				margin: 0 20rpx;
				text {
					font-size: 30rpx;
					font-weight: bold;
					color: #000;
				}
			}
			.list {
				.item {
					&.is-x1 {
						.cell {
							margin: 20rpx;
							padding: 10rpx;
							position: relative;
							display: flex;
							align-items: center;
							background: #ffffff;
							border-radius: 20rpx;
						}
						.cover {
							margin-right: 10rpx;
							image {
								display: block;
								width: 180rpx;
								height: 180rpx;
								background: #eeeeee;
								border-radius: 20rpx;
							}
						}
						.exp {
							position: relative;
						}
						.name {
							height: 80rpx;
							line-height: 40rpx;
							text-align: justify;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							text {
								font-size: 28rpx;
							}
						}
						.fee {
							margin: 10rpx 0 0;
							height: 40rpx;
							line-height: 40rpx;
							text {
								color: #E86A33;
								font-size: 30rpx;
								&:first-child {
									font-size: 24rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
